<template>
  <div>
    <!--标题信息-->
    <head-info :tel="userInfo.staffTel"></head-info>
    <!--横向菜单栏-->
    <head-menu></head-menu>
    <!--跑马灯图片-->
    <carousel></carousel>
    <!--主体部分-->
    <el-row class="main">
      <el-col :span="6">
        <div><img class="about-img" :src="aboutImg"/></div>
        <div class="title-text">经营范围</div>
      </el-col>
      <el-col :span="3" class="left-menu">
        <Menu :menuList="menuList"></Menu>
        <div class="user-info">
          <img :src="userInfoImg"/>
          <div>
            <p>{{userInfo.businessName}}</p>
            <p>联系人：{{userInfo.staffName}}</p>
            <p>联系电话：{{userInfo.staffTel}}</p>
            <p>邮箱：{{userInfo.email}}</p>
            <p>地址：{{userInfo.businessAddr}}</p>
          </div>
        </div>
      </el-col>
      <el-col :span="15">
        <el-row class="main-title">
          <el-col :span="15" class="left-title">{{ title }}</el-col>
          <el-col :span="9" class="right-title">当前所在位置：{{ title }}</el-col>
        </el-row>
        <el-row class="main-content">
          <router-view v-if="isRouterAlive"></router-view>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="foot">
      <el-col :span="9" :offset="4">
        <pre class="foot-link">友情链接：<a target="_blank" href="http://tieba.baidu.com">百度贴吧</a>     <a target="_blank" href="http://image.baidu.com">百度图片</a>   </pre>
      </el-col>
    </el-row>
    <div class="foot-text">
      <pre class="foot-link">厦门钇企财富企业管理有限公司 闽ICP备18023069号-1</pre>
    </div>
    <div class="foot-text">
      <pre class="foot-link">厦门技术支持：厦门永创联盟有限公司 人才支持：<a target="_blank" href="http://www.xgzrc.com/">厦门人才网</a></pre>
    </div>
  </div>
</template>
<script>
import HeadInfo from './components/head-info';
import HeadMenu from './components/head-menu';
import carousel from './components/carousel';
import Menu from '@/components/menu';
import api from './api';

export default {
  components: {HeadInfo, HeadMenu, carousel, Menu},
  provide() {
    return {
      reload: this.reload
    };
  },
  created() {
    this.init();
  },
  data() {
    return {
      isRouterAlive: true,
      aboutImg: '/static/images/about.jpg',
      userInfoImg: '/static/images/relate.png',
      userInfo: {},
      menuList: [{
        href: '/graduate',
        label: '公司注册代理',
        children: []
      }, {
        href: '/backbone',
        label: '代理记帐、代理报税',
        children: []
      }, {
        href: '/cadre',
        label: '代办验资、审计、税审',
        children: []
      }, {
        href: '/skill',
        label: '财务顾问、税务顾问',
        children: []
      }, {
        href: '/invesment',
        label: '代办各类许可证照',
        children: []
      }]
    };
  },
  computed: {
    title() {
      return this.$route.name;
    }
  },
  methods: {
    init() {
      this.getBusinessInfo();
    },
    getBusinessInfo() {
      api.getBusinessInfo().then((data) => {
        this.userInfo = data;
      });
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    }
  }
};
</script>
<style scoped lang="scss">
  .main {
    margin-top: 10px;
    min-height: 800px;
    overflow-x: hidden;
    img.about-img {
      width: 150%;
      height: 30px;
    }
    .title-text {
      position: absolute;
      top: 0;
      left: 25%;
      z-index: 20;
      font-size: 24px;
    }
  }
  .left-menu {
    margin-top: 30px;
  }
  .user-info {
    position: absolute;
    left: 0;
    margin-top: 3%;
    width: 52%;
    div {
      position: absolute;
      left: 37%;
      top: 0;
      margin-top: 20px;
    }
    img {
      width: 72%;
    }
  }
  .main-title {
    height: 60px;
    margin-left: 5%;
    margin-right: 5%;
    line-height: 60px;
    border-bottom: 4px solid #db9d36;
    & .left-title {
      font-size: 20px;
      font-weight: bold;
    }
    & .right-title {
      font-size: 10px;
      color: #999999;
      float: right;
      text-align: end;
    }
  }
  .main-content {
    margin-left: 5%;
    margin-right: 5%;
  }
  .foot {
    a,pre {
      color: #999
    }
    width: 100%;
    height: 40px;
    background-color: #ebebeb;
    &-text {
      text-align: center;
      color: #999;
      a {
        color: #999
      }
    }
    &-link {
      white-space: pre-wrap;
      font-size: 10px;
      line-height: 20px;
    }
  }
</style>
